<script setup lang="ts">
import { ref, computed } from "vue";
import { useColumns } from "./columns";
import Plus from "~icons/ep/plus";
import Delete from "~icons/ep/delete";
import "plus-pro-components/es/components/dialog-form/style/css";
import { setLevel } from "@/api/admin";
defineOptions({
  name: "UserLevel"
});
import {
  type PlusColumn,
  type FieldValues,
  PlusDialogForm
} from "plus-pro-components";
import { ElMessage } from "element-plus";
import { useMenu } from "@/utils/power";
const power = useMenu(["edit"]);

const edit = ref(false);

const rules = {
  couponRatio: [
    {
      required: true,
      message: "优惠点数必填"
    },
    {
      type: "number",
      min: 0,
      max: 90,
      message: "优惠点数必须在 0 - 90 之间",
      trigger: "blur"
    }
  ]
};

const formColumns: PlusColumn[] = [
  {
    label: "优惠点数",
    prop: "couponRatio",
    valueType: "input-number",
    tooltip: "请输入优惠点数"
  }
];
const visible = ref(false);
const values = ref<FieldValues>({ status: 0 });

const { loading, columns, dataList, loadingConfig, adaptiveConfig, loadData } =
  useColumns();
const columnsRef = computed(() => {
  if (power.value.edit) {
    return columns;
  }
  const columnsCopy = [...columns];
  return columnsCopy.slice(0, -1);
});
const editClick = async row => {
  try {
    const params = {
      levelId: row.id,
      couponRatio: row.coupon_ratio
    };
    values.value = params;
    edit.value = true;
    visible.value = true;
    console.log("tttt", params);
  } catch (error) {
    console.error(error);
  }
};
const confirmLoading = ref(false);
const handleSubmit = async (value: FieldValues) => {
  const updatedValues = { ...values.value };
  confirmLoading.value = true;
  if (edit.value) {
    try {
      await setLevel(updatedValues);
      visible.value = false;
      confirmLoading.value = false;
      formRef.value?.formInstance?.resetFields();
      loadData();
      ElMessage.success("修改成功");
    } catch (error) {
      confirmLoading.value = false;
      console.log(error, "error");
    }
  } else {
  }
};
const formRef = ref();
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>用户等级管理</h3>
        </template>
      </ElPageHeader>
    </template>
    <pure-table
      ref="tableRef"
      showOverflowTooltip
      border
      adaptive
      :adaptiveConfig="adaptiveConfig"
      row-key="id"
      alignWhole="center"
      :loading="loading"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columnsRef"
    >
      <template #operation="{ row }">
        <el-button
          v-if="power.edit"
          type="primary"
          size="small"
          @click="editClick(row)"
          >编辑</el-button
        >
      </template>
    </pure-table>
    <PlusDialogForm
      ref="formRef"
      v-model:visible="visible"
      v-model="values"
      :form="{ columns: formColumns, rules, labelWidth: 120 }"
      :dialog="{ confirmLoading }"
      :title="edit ? '编辑等级' : '添加配置'"
      @confirm="handleSubmit"
    />
  </ElCard>
</template>

<style scoped>
::deep .wot-message-box__icon--warning {
  --el-messagebox-color: red;
  color: red !important;
  fill: red !important;
}
</style>
